<template>
  <div class="in-house-con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>

    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="sizeChange(20)">
        <template #headerLeft>
          <a-button type="primary" size="medium" @click="show('add')" v-if="$authPass('inventory.other.out.save')">创建出库单</a-button>
        </template>
        <template #tableBody>
          <a-spin :loading="loading" style="width: 100%; height: 100%">
            <div>
              <table class="my-table table-header">
                <colgroup>
                  <col width="60px" />
                  <col v-for="item of columns" :width="item.width" />
                </colgroup>
                <thead>
                  <tr>
                    <th>
                      <div style="width: 40px; position: relative">
                        <icon-plus-circle class="icon-btn" v-if="!isCollapse" @click="collapseAll(true)" />
                        <icon-minus-circle class="icon-btn" v-else @click="collapseAll(false)" />
                        <!-- <a-checkbox @change="changeAll" value="all" class="title-checkbox" style="margin: 8px 0 0 8px"></a-checkbox> -->
                      </div>
                    </th>
                    <th v-for="item of columns">
                      <div>{{ item.title }}</div>
                    </th>
                  </tr>
                </thead>
              </table>
            </div>

            <a-scrollbar style="overflow: auto; height: 100%">
              <a-empty v-if="dataList.length <= 0" />
              <!-- <div class="table-body" v-else> -->
              <div v-for="item of dataList" v-else>
                <div class="item">
                  <div class="item-con">
                    <div class="left">
                      <!-- <a-checkbox v-model="item.checked" class="title-checkbox" style="margin: 23px 0 0 5px"></a-checkbox> -->
                      <icon-plus-circle class="icon-btn" v-if="!item.isCollapse" @click="item.isCollapse = true" />
                      <icon-minus-circle class="icon-btn" v-else @click="item.isCollapse = false" />
                    </div>
                    <div class="right">
                      <div class="right-box">
                        <div class="hd">
                          <span class="label">单号：</span>
                          <span>{{ item.billNo }} <i style="margin-left: 5px" class="icon icon-fuzhi highlight" @click="copy(item.billNo)"></i></span>
                        </div>
                        <div class="bd">
                          <span class="label">库仓：</span>
                          <span>{{ item.warehouseName }}({{ item.warehouseCode }})</span>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="hd">
                          <span class="label">类型：</span>
                          <span>其他出库</span>
                        </div>
                        <div class="bd">
                          <span class="label">出库数量：</span>
                          <span>{{ item.totalAmt }}</span>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="hd">
                          <span class="label">创建人：</span>
                          <span>{{ item.createUname }}</span>
                        </div>
                        <div class="bd">
                          <span class="label">创建日期：</span>
                          <span>{{ $setTime(item.gmtCreate) }}</span>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="hd">
                          <span class="label">审核人：</span>
                          <span>{{ item.auditorName }}</span>
                        </div>
                        <div class="bd">
                          <span class="label">审核日期：</span>
                          <span>{{ $setTime(item.gmtAudit) }}</span>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="hd">
                          <span class="label">总货值：</span>
                          <span>{{ item.totalValue }}</span>
                        </div>
                        <div class="bd">
                          <span class="label">状态：</span>
                          <span v-if="item.status == 1">草稿</span>
                          <span v-if="item.status == 2">待审核</span>
                          <span v-if="item.status == 3">完成</span>
                          <span v-if="item.status == 4">驳回</span>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="hd">
                          <span class="label">备注：</span>
                          <span>{{ item.remark }}</span>
                        </div>
                        <div class="bd">{{ item.auditRemark }}</div>
                      </div>
                      <div class="right-box" style="line-height: 62px">
                        <span class="btn ml10" @click="showDetailModal(item.id)">详情</span>
                        <span class="btn ml10" @click="toAudit(item, 2)" v-if="item.status == 2 && $authPass('inventory.other.out.audit')">审核</span>
                        <span class="btn ml10" @click="toAudit(item, 1)" v-if="(item.status == 1 || item.status == 4) && $authPass('inventory.other.out.audit')">提交审核</span>
                        <span class="btn ml10" v-if="(item.status == 1 || item.status == 4) && $authPass('inventory.other.out.edit')" @click="show('edit', item.id)">编辑</span>
                        <span class="btn ml10" v-if="(item.status == 1 || item.status == 4) && $authPass('inventory.other.out.delete')" style="color: red" @click="del(item)">删除</span>
                      </div>
                    </div>
                  </div>
                </div>
                <table v-if="item.isCollapse" class="tbody-con">
                  <colgroup>
                    <col width="60px" />
                    <col v-for="item of columns" :width="item.width" />
                  </colgroup>
                  <tbody>
                    <tr v-for="item1 of item.otherOutItems" style="border-bottom: 1px solid #e5e6eb">
                      <td>
                        <div></div>
                      </td>
                      <td>
                        <div>
                          <TextHidden :rowsWidth="90">{{ item1.shopName }}</TextHidden>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div style="height: 56px">
                            <ImgPopover :src="item1.productImg">
                              <template #con>
                                <a-image style="margin-top: 8px" :preview="false" width="40" height="40" fit="contain" :src="item1.productImg" />
                              </template>
                            </ImgPopover>
                            <!-- <a-image style="margin-top: 8px" width="40px" height="40px" :src="item1.productImg"></a-image> -->
                          </div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>
                            <TextHidden position="top" :rowsWidth="140">{{ item1.productName }}</TextHidden>
                          </div>
                          <br />
                          <ShowSpuDetailBySku :val="item1.sku" :showLimit="true" :rows="1" />
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.msku }}</div>
                          <div>{{ item1.fnsku }}</div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.spu }}</div>
                          <div>{{ item1.cateName }}</div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.brandName }}</div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.productType }}</div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.amt }}</div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.attribute == 'good' ? '良品' : '次品' }}</div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.price }}</div>
                        </div>
                      </td>
                      <td>
                        <div>
                          <div>{{ item1.price * item1.amt }}</div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- </div> -->
            </a-scrollbar>
          </a-spin>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <Detatil ref="detail" :type="detailType" :id="id" @save="sizeChange(20)" />
  <Audit ref="audit" :info="info" @save="getList" />
  <ShowDetail ref="showDetail" :id="id" type="out" />
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import Detatil from './components/createdOutHouse.vue'
  import ShowDetail from './components/showDetail.vue'
  import { outFindOtherInPageByParam, commitOtherOut, findShopListByShare, deleteOtherOut } from '@/api/warehouse'
  import { getOrganizesUser } from '@/api/system'
  import Audit from './components/audit.vue'
  import { Modal, Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  import useClipboard from 'vue-clipboard3'
  export default defineComponent({
    name: 'OutHouse',
    components: { FilterTable, TableWrap, Detatil, Audit, ShowDetail },

    setup() {
      const detail = ref()
      const audit = ref()
      const showDetail = ref()
      const { toClipboard } = useClipboard()
      const data: any = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'warehouseName',
            keyItems: [
              { label: '仓库名称', value: 'warehouseName' },
              { label: '仓库ID', value: 'warehouseCode' },
            ],
            keyWidth: '90',
            value: ref(),
            placeholder: '请输入',
            label: '仓库名称',
            width: 160,
            isMultiple: false,
          },
          {
            type: 'input_search',
            label: '单号',
            key: 'billNo',
            value: ref(),
            placeholder: '请输入单号',
            keyWidth: '90',
            width: 160,
            isMultiple: false,
          },
          {
            key: 'shopId',
            label: '店铺',
            value: ref(),
            type: 'select',
            keyWidth: '90',
            width: 140,
            optionItems: [],
            attrs: {
              multiple: true,
              'max-tag-count': 1,
            },
          },
          {
            type: 'input_keyword',
            key: 'skus',
            keyItems: [
              { label: 'SKU', value: 'skus' },
              { label: 'SPU', value: 'spus' },
              { label: 'MSKU', value: 'mskus' },
              { label: 'FNSKU', value: 'fnskus' },
              { label: '产品名称', value: 'productName' },
            ],
            keyWidth: '90',
            value: ref(),
            placeholder: '请输入',
            label: 'SKU',
            width: 160,
            isMultiple: true,
          },
          {
            type: 'sel_double',
            key: 'createUid',
            keyItems: [
              { label: '创建人', value: 'createUid' },
              { label: '审核人', value: 'auditorId' },
            ],
            keyWidth: '90',
            optionItems: [],
            value: ref(),
            placeholder: '请输入',
            label: '创建人',
            width: 160,
            isMultiple: false,
          },
          {
            type: 'keyword_date_range',
            key: 'gmtCreate',
            keyItems: [
              { label: '创建日期', value: 'gmtCreate' },
              { label: '审核日期', value: 'gmtAudit' },
            ],
            keyWidth: '110',
            value: ref(),
            placeholder: '请输入',
            label: '创建日期',
            width: 200,
          },
          {
            key: 'status',
            label: '状态',
            value: ref(),
            type: 'select',
            width: 140,
            keyWidth: '90',
            optionItems: [
              {
                label: '状态',
                value: '',
              },
              {
                label: '待审核',
                value: '2',
              },
              {
                label: '已完成',
                value: '3',
              },
              {
                label: '已驳回',
                value: '4',
              },
            ],
          },
        ],
        columns: [
          { title: '店铺', dataIndex: 'name', width: '130px' },
          { title: '图片', dataIndex: 'name', width: '140px' },
          { title: '产品名称/SKU', dataIndex: 'name', width: '240px' },
          { title: 'MSKU/FNSKU', dataIndex: 'name', width: '250px' },
          { title: 'SPU/类目', dataIndex: 'name', width: '200px' },
          { title: '品牌', dataIndex: 'name', width: '140px' },
          // { title: '单位', dataIndex: 'name', width: 120 },
          { title: '产品类型', dataIndex: 'name', width: '110px' },
          { title: '数量', dataIndex: 'name', width: '140px' },
          { title: '库存属性', dataIndex: 'name', width: '140px' },
          { title: '单位成本', dataIndex: 'name', width: '120px' },
          { title: '货值', dataIndex: 'name', width: '130px' },
        ],
        dataList: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        expandable: {},
        loading: false,
        isCollapse: false,
        info: {
          type: 'in',
          id: '',
        },
        id: '',
        detailType: '',
        searchValue: {},
      })
      const searchByVal = (info: any) => {
        data.searchValue = {}
        data.searchValue = info
        data.pageNation.pageNum = 1
        if (data.searchValue.startDate) {
          data.searchValue.startDate = `${data.searchValue.startDate} 00:00:00`
          data.searchValue.endDate = `${data.searchValue.endDate} 23:59:59`
        }
        getList()
      }
      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }
      const changeAll = (val: boolean) => {
        data.dataList.map((e: any) => (e.checked = val))
      }

      const getList = async (info?: any) => {
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.isCollapse = false
        data.loading = true
        const res = await outFindOtherInPageByParam(params)
        data.dataList = res.data?.records || []
        data.pageNation.total = res.data?.total
        data.loading = false
      }

      const collapseAll = (val: boolean) => {
        data.isCollapse = val
        data.dataList.map((e: any) => (e.isCollapse = val))
      }

      const toAudit = (item: any, type: number) => {
        if (type == 2) {
          data.info.id = item.id
          data.info.type = 'out'
          audit.value.visible = true
        } else if (type == 1) {
          Modal.error({
            title: '提示',
            content: '是否提交审核？',
            titleAlign: 'start',
            cancelText: '取消',
            hideCancel: false,
            onBeforeOk: async (done) => {
              const res: any = await commitOtherOut({ ids: [item.id] })
              if (res.code == 'SUCCESS') {
                done(true)
                Message.success('提交成功')
                getList()
              }
            },
          })
        }
      }

      const showDetailModal = (id: string) => {
        data.id = id
        showDetail.value.visible = true
      }

      const copy = async (val: string) => {
        try {
          // 复制
          await toClipboard(val)
          Message.success('复制成功')
          // 复制成功
        } catch (e) {
          // 复制失败
        }
      }

      // 获取店铺列表
      const getShopList = async () => {
        const res = await findShopListByShare()
        let arr = res?.data.map((e: any) => {
          e.label = e.shopName
          e.value = e.sellerMarketId
          return e
        })
        data.filterItem[2].optionItems = arr || []
      }

      // 获取用户列表
      const getUSerList = async () => {
        let params = {
          depart: false,
          pageNum: 1,
          pageSize: 1000,
        }
        const res: any = await getOrganizesUser(params)
        if (res.code == 'SUCCESS') {
          let userList = res.data.records
          userList.map((e: any) => {
            e.label = e.userName
            e.value = e.id
            return e
          })
          data.filterItem[4].optionItems = userList
        }
      }

      const del = (item: any) => {
        Modal.confirm({
          title: '删除',
          content: `请再次确认是否删除出库单`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            const res: any = await deleteOtherOut({ ids: [item.id] })
            if (res) {
              Message.success('删除成功')
              getList()
            }
          },
        })
      }

      const show = (type: string, id: string) => {
        data.detailType = type
        data.id = id
        detail.value.visible = true
      }

      getShopList()
      getUSerList()
      getList()
      return {
        ...(toRefs(data) as any),
        searchByVal,
        changePage,
        sizeChange,
        changeAll,
        collapseAll,
        detail,
        audit,
        toAudit,
        getList,
        showDetail,
        showDetailModal,
        copy,
        del,
        show,
      }
    },
  })
</script>

<style lang="less" scoped>
  .icon-btn {
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .arco-scrollbar-type-embed,
  .arco-scrollbar-both {
    width: 100% !important;
    height: calc(100% - 37px) !important;
  }

  .in-house-con {
    width: 100%;
    height: calc(100vh - @menuAndTabHeight);
    // background-color: white;
  }

  .search-con {
    // padding: 10px;
    box-sizing: border-box;
  }

  .line {
    width: 100%;
    height: 5px;
    background-color: #f0f2f5;
  }

  .label {
    // color: #9ca4ae;
  }

  .my-table {
    width: 100%;
    min-height: 37px;
    text-align: left;
    font-size: 12px;
    background-color: #f2f3f5;
    line-height: 37px;
  }

  .item {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #e5e6eb;
    // display: flex;
    font-size: 12px;
    overflow: hidden;
    position: relative;

    &::-webkit-scrollbar {
      height: 6px;
      position: absolute;
      bottom: 0;
    }

    &:hover {
      overflow: auto;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      opacity: 0.2;
      background: #d4d7dd;
    }

    &::-webkit-scrollbar-track {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: white;
      opacity: 0;
    }

    .item-con {
      min-width: 1480px;
    }

    .left {
      width: 80px;
      height: 62px;
      position: relative;
      float: left;
    }
    .right {
      height: 68px;
      width: calc(100% - 80px);
      display: flex;

      .right-box {
        float: left;
        user-select: none;
        width: 200px;

        .hd,
        .bd {
          width: 100%;
          height: 31px;
          line-height: 31px;
        }
        .btn {
          color: #169bd5;
          cursor: pointer;
          user-select: none;
          display: inline-block;
        }
      }
    }
  }

  .tbody-con {
    // width: 100%;
    // height: 100%;
    text-align: left;
    table-layout: fixed;
    tr {
      &:nth-child(1) {
      }
      td {
        height: 56px;
        box-sizing: border-box;
        // border-right: 1px solid #e5e6eb;
      }
    }
  }
</style>
